<template>
  <view class="user-relations-page">
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <view class="back-button" @click="goBack">
        <uni-icons size="28" color="#333" type="left"></uni-icons>
      </view>
      <view class="nav-title">{{ pageTitle }}</view>
      <view class="nav-right">
        <uni-icons size="28" color="#333" type="search"></uni-icons>
      </view>
    </view>

    <!-- 标签页切换 -->
    <view class="tabs-container">
      <view 
        class="tab-item"
        :class="{ active: activeTab === 'followers' }"
        @click="switchTab('followers')"
      >
        <text class="tab-text">{{ activeTab === 'followers' ? '粉丝' : '粉丝' }}</text>
        <view class="tab-indicator" v-if="activeTab === 'followers'"></view>
      </view>
      <view 
        class="tab-item"
        :class="{ active: activeTab === 'following' }"
        @click="switchTab('following')"
      >
        <text class="tab-text">{{ activeTab === 'following' ? '关注' : '关注' }}</text>
        <view class="tab-indicator" v-if="activeTab === 'following'"></view>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view 
      class="content-scroll" 
      scroll-y 
      @scrolltolower="onLoadMore"
    >
      <!-- 粉丝列表 -->
      <view v-if="activeTab === 'followers'" class="users-list">
        <view v-if="followers.length === 0 && !loading" class="empty-state">
          <view class="empty-icon-container">
            <uni-icons size="120" color="#E1E1E1" type="users"></uni-icons>
          </view>
          <text class="empty-text">暂无粉丝</text>
          <text class="empty-subtitle">分享你的美食创作，吸引更多粉丝关注你</text>
        </view>
        
        <view 
          v-for="(user, index) in followers" 
          :key="user.id" 
          class="user-card"
          :style="{ animationDelay: index * 0.05 + 's' }"
          @click="viewUserProfile(user.id)"
        >
          <!-- 用户头像 -->
          <view class="avatar-container">
            <image :src="user.avatar" class="user-avatar" mode="aspectFill"></image>
            <view v-if="user.badge" class="user-badge">{{ user.badge }}</view>
          </view>
          
          <!-- 用户信息 -->
          <view class="user-info">
            <view class="user-name">{{ user.name }}</view>
            <view class="user-bio">{{ user.bio }}</view>
            <view class="user-stats">
              <text class="stat-item">{{ user.recipeCount }} 菜谱</text>
              <text class="stat-item">{{ user.followersCount }} 粉丝</text>
            </view>
          </view>
          
          <!-- 关注按钮 -->
          <view 
            class="follow-button"
            :class="{ following: user.isFollowing }"
            @click.stop="toggleFollow(user.id, !user.isFollowing)"
          >
            <text class="follow-text">{{ user.isFollowing ? '已关注' : '关注' }}</text>
          </view>
        </view>
      </view>

      <!-- 关注列表 -->
      <view v-if="activeTab === 'following'" class="users-list">
        <view v-if="following.length === 0 && !loading" class="empty-state">
          <view class="empty-icon-container">
            <uni-icons size="120" color="#E1E1E1" type="heart"></uni-icons>
          </view>
          <text class="empty-text">暂无关注</text>
          <text class="empty-subtitle">关注感兴趣的美食创作者，发现更多精彩内容</text>
        </view>
        
        <view 
          v-for="(user, index) in following" 
          :key="user.id" 
          class="user-card"
          :style="{ animationDelay: index * 0.05 + 's' }"
          @click="viewUserProfile(user.id)"
        >
          <!-- 用户头像 -->
          <view class="avatar-container">
            <image :src="user.avatar" class="user-avatar" mode="aspectFill"></image>
          </view>
          
          <!-- 用户信息 -->
          <view class="user-info">
            <view class="user-name">{{ user.name }}</view>
            <view class="user-bio">{{ user.bio }}</view>
            <view class="user-stats">
              <text class="stat-item">{{ user.recipeCount }} 菜谱</text>
              <text class="stat-item">{{ user.followersCount }} 粉丝</text>
            </view>
          </view>
          
          <!-- 关注按钮 -->
          <view 
            class="follow-button following"
            @click.stop="toggleFollow(user.id, true)"
          >
            <text class="follow-text">已关注</text>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view v-if="loading" class="loading-more">
        <uni-icons type="spinner" size="24" color="#999" class="loading-icon"></uni-icons>
        <text class="loading-text">加载中...</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { onLoad, onShow } from '@dcloudio/uni-app';

// 路由相关
const route = useRoute();
const router = useRouter();
const { type } = route.query;

// 当前激活的标签页
const activeTab = ref(type === 'following' ? 'following' : 'followers');

// 数据状态
const followers = ref([]);
const following = ref([]);
const loading = ref(false);
const hasMore = ref(true);

// 分页信息
const pageInfo = {
  followers: { page: 1, size: 10 },
  following: { page: 1, size: 10 }
};

// 计算页面标题
const pageTitle = computed(() => {
  return activeTab.value === 'followers' ? '我的粉丝' : '我的关注';
});

// 切换标签页
const switchTab = (tab) => {
  if (activeTab.value === tab) return;
  
  activeTab.value = tab;
  // 重置分页信息
  pageInfo[tab] = { page: 1, size: 10 };
  hasMore.value = true;
  
  // 加载数据
  loadData(tab);
};

// 加载数据
const loadData = async (tab = activeTab.value) => {
  if (!hasMore.value || loading.value) return;
  
  loading.value = true;
  
  try {
    // 模拟API请求延迟
    await new Promise(resolve => setTimeout(resolve, 500));
    
    // 静态模拟数据
    if (tab === 'followers' && followers.value.length === 0) {
      followers.value = [
        {
          id: '1',
          name: 'Emma Wilson',
          avatar: '/static/images/avatar1.jpg',
          bio: '美食爱好者，专注于健康料理',
          recipeCount: 28,
          followersCount: 1250,
          isFollowing: false,
          badge: '新'
        },
        {
          id: '2',
          name: 'Marco Rossi',
          avatar: '/static/images/avatar2.jpg',
          bio: '意大利厨师，分享正宗意式美食',
          recipeCount: 45,
          followersCount: 3200,
          isFollowing: true
        },
        {
          id: '3',
          name: 'Sophie Chen',
          avatar: '/static/images/avatar3.jpg',
          bio: '甜点师，热爱烘焙艺术',
          recipeCount: 36,
          followersCount: 2100,
          isFollowing: false
        },
        {
          id: '4',
          name: 'James Peterson',
          avatar: '/static/images/avatar4.jpg',
          bio: '烤肉专家，分享烧烤技巧',
          recipeCount: 19,
          followersCount: 850,
          isFollowing: true
        }
      ];
    }
    
    if (tab === 'following' && following.value.length === 0) {
      following.value = [
        {
          id: '5',
          name: 'Chef Michael',
          avatar: '/static/images/avatar5.jpg',
          bio: '米其林星级厨师，烹饪学院讲师',
          recipeCount: 120,
          followersCount: 15000,
          isFollowing: true
        },
        {
          id: '6',
          name: 'Sarah Johnson',
          avatar: '/static/images/avatar6.jpg',
          bio: '健康饮食博主，营养师',
          recipeCount: 85,
          followersCount: 8900,
          isFollowing: true
        },
        {
          id: '7',
          name: 'Asian Food Master',
          avatar: '/static/images/avatar7.jpg',
          bio: '亚洲美食专家，融合料理创新者',
          recipeCount: 63,
          followersCount: 6700,
          isFollowing: true
        }
      ];
    }
    
    // 模拟没有更多数据
    hasMore.value = false;
  } catch (error) {
    console.error('加载用户数据失败:', error);
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

// 加载更多
const onLoadMore = () => {
  if (hasMore.value && !loading.value) {
    pageInfo[activeTab.value].page++;
    loadData();
  }
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 查看用户资料
const viewUserProfile = (userId) => {
  // 这里可以导航到用户个人页面
  uni.showToast({
    title: `查看用户 ${userId} 的资料`,
    icon: 'none'
  });
};

// 关注/取消关注
const toggleFollow = async (userId, isFollowing) => {
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 300));
    
    // 更新粉丝列表中的关注状态
    followers.value = followers.value.map(user => {
      if (user.id === userId) {
        return { ...user, isFollowing: !isFollowing };
      }
      return user;
    });
    
    // 更新关注列表
    if (!isFollowing) {
      // 添加到关注列表
      const userToFollow = followers.value.find(user => user.id === userId);
      if (userToFollow && !following.value.find(user => user.id === userId)) {
        following.value.push({ ...userToFollow, isFollowing: true });
      }
    } else {
      // 从关注列表移除
      following.value = following.value.filter(user => user.id !== userId);
    }
    
    // 显示操作结果
    uni.showToast({
      title: isFollowing ? '已取消关注' : '关注成功',
      icon: 'success'
    });
  } catch (error) {
    console.error('关注操作失败:', error);
    uni.showToast({
      title: '操作失败，请重试',
      icon: 'none'
    });
  }
};

// 生命周期
onLoad(() => {
  console.log('用户关系页面加载');
});

onShow(() => {
  loadData();
});

onMounted(() => {
  loadData();
});
</script>

<style scoped lang="scss">
// 颜色变量
$primary: #4A90E2;
$primary-light: #6FA3E9;
$primary-dark: #3A7BC8;
$text-primary: #333333;
$text-secondary: #666666;
$text-tertiary: #999999;
$background: #F8F9FA;
$card-bg: #FFFFFF;
$border-color: #E9ECEF;
$success-color: #52C41A;
$shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
$shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
$radius-sm: 8px;
$radius-md: 12px;
$radius-lg: 16px;
$radius-full: 9999px;

// 过渡动画
$transition-fast: all 0.2s ease;
$transition-normal: all 0.3s ease;

// 页面容器
.user-relations-page {
  min-height: 100vh;
  background-color: $background;
}

// 顶部导航栏
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background-color: $card-bg;
  box-shadow: $shadow-sm;
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: $radius-full;
  transition: $transition-fast;
  &:active {
    background-color: $background;
    transform: scale(0.95);
  }
}

.nav-title {
  font-size: 18px;
  font-weight: 600;
  color: $text-primary;
}

.nav-right {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: $radius-full;
  transition: $transition-fast;
  &:active {
    background-color: $background;
  }
}

// 标签页容器
.tabs-container {
  display: flex;
  background-color: $card-bg;
  margin-bottom: 8px;
  position: sticky;
  top: 56px;
  z-index: 90;
  box-shadow: $shadow-sm;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  position: relative;
  cursor: pointer;
  transition: $transition-normal;
  
  .tab-text {
    font-size: 16px;
    font-weight: 500;
    color: $text-secondary;
    transition: $transition-normal;
  }
  
  &.active {
    .tab-text {
      color: $primary;
      font-weight: 600;
    }
  }
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  width: 32px;
  height: 3px;
  background-color: $primary;
  border-radius: $radius-full;
  transition: $transition-normal;
}

// 内容滚动区域
.content-scroll {
  min-height: calc(100vh - 120px);
}

// 用户列表
.users-list {
  padding: 8px;
}

// 用户卡片
.user-card {
  display: flex;
  align-items: center;
  padding: 16px;
  margin-bottom: 8px;
  background-color: $card-bg;
  border-radius: $radius-md;
  box-shadow: $shadow-sm;
  transition: $transition-normal;
  animation: fadeInUp 0.5s ease-out;
  
  &:active {
    transform: scale(0.98);
    box-shadow: $shadow-sm;
  }
}

// 头像容器
.avatar-container {
  position: relative;
  margin-right: 16px;
}

.user-avatar {
  width: 56px;
  height: 56px;
  border-radius: $radius-full;
  object-fit: cover;
  border: 2px solid $background;
}

.user-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  padding: 2px 8px;
  background-color: $primary;
  color: white;
  font-size: 12px;
  font-weight: 600;
  border-radius: $radius-full;
  box-shadow: $shadow-sm;
}

// 用户信息
.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-bio {
  font-size: 14px;
  color: $text-secondary;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-stats {
  display: flex;
  gap: 16px;
}

.stat-item {
  font-size: 12px;
  color: $text-tertiary;
}

// 关注按钮
.follow-button {
  padding: 8px 16px;
  border: 1.5px solid $primary;
  border-radius: $radius-full;
  background-color: transparent;
  transition: $transition-normal;
  min-width: 80px;
  text-align: center;
  
  .follow-text {
    font-size: 14px;
    font-weight: 500;
    color: $primary;
    transition: $transition-normal;
  }
  
  &:active {
    transform: scale(0.95);
  }
  
  &.following {
    background-color: $primary;
    
    .follow-text {
      color: white;
    }
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}

.empty-icon-container {
  margin-bottom: 16px;
  padding: 24px;
  background-color: $background;
  border-radius: $radius-full;
}

.empty-text {
  font-size: 18px;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: 8px;
}

.empty-subtitle {
  font-size: 14px;
  color: $text-tertiary;
  line-height: 1.5;
  max-width: 300px;
}

// 加载更多
.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: $text-tertiary;
}

.loading-icon {
  margin-right: 8px;
}

.loading-text {
  font-size: 14px;
}

// 动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>